<script setup lang="ts">
import { computed, ComputedRef, nextTick, onMounted, reactive, ref, Ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import { pageParamsInterface } from "@/views/product/trademark/interface/interface.ts";
import { trademark } from "@/api/product/trademarkApi/interface.ts";
import useTrademarkStore from "@/pinia/modules/product/trademarkStore/trademarkStore.ts";
import TradeForm from "@/views/product/trademark/components/tradeForm/tradeForm.vue";

const trademarkStore = useTrademarkStore();

const { trademarkList, total } = storeToRefs(trademarkStore);
/* tradeForm组件的ref对象 */
const tradeFormRef = ref();
/* 是否显示添加或者编辑品牌的对话框 */
const showDialog: Ref<boolean> = ref<boolean>(false);
/* 添加品牌状态还是编辑品牌状态 */
const edit: Ref<boolean> = ref<boolean>(false);
/* 获取品牌分页列表的参数 */
const pageParams: pageParamsInterface = reactive<pageParamsInterface>({ page: 1, limit: 10 });
/* 是否处于加载品牌列表的状态 */
const loading: Ref<boolean> = ref<boolean>(false);
/* 分页器一页展示的数据条数发生变化的回调函数 */
const handleSizeChange: (size: number) => void = (size: number): void => {
  pageParams.limit = size;
  fetchTradeMarkList();
};
/* 分页器当前页的页码发生变化的回调函数 */
const handleCurrentChange: (page: number) => void = (page: number): void => {
  pageParams.page = page;
  fetchTradeMarkList();
};
/* 获取品牌列表的回调函数 */
const fetchTradeMarkList: () => Promise<void> = async (): Promise<void> => {
  try {
    // 开启加载状态
    loading.value = true;
    await trademarkStore.fetchTrademarkList(pageParams);
  } catch (error: any) {
    ElMessage.error(error.message);
  } finally {
    // 关闭加载状态
    loading.value = false;
  }
};
/* 删除品牌的回调函数 */
const deleteTradeMark: (trade: trademark) => Promise<void> = async (trade: trademark): Promise<void> => {
  try {
    const deleteResult: string = await trademarkStore.deleteTradeMark(trade.id as number);
    ElMessage.success(deleteResult);
    fetchTradeMarkList();
  } catch (error: any) {
    ElMessage.error(error.message);
  }
};
/* 点击删除品牌的回调函数 */
const handleDelete = async (trade: trademark) => {
  const confirm: string = await ElMessageBox.confirm(`确定要删除${trade.tmName}吗?`, "警告", { type: "warning" }).catch((error: any) => error);
  if (confirm === "cancel") return;
  deleteTradeMark(trade);
};
/* 点击添加品牌的回调函数 */
const handleAdd = () => {
  showDialog.value = true;
  edit.value = false;
};
/* 点击编辑品牌的回调函数 */
const handleEdit = (trade:any) => {
  showDialog.value = true;
  edit.value = true;
  // 调用子组件的方法
  nextTick(()=>{
    tradeFormRef.value.findTrademark(trade);
  })
};


/* 对话框组件关闭时的回调函数 */
const dialogClose = () => {
  tradeFormRef.value.resetFields();
};

/* tradeForm组件添加品牌成功的回调函数 */
const success = () => {
  showDialog.value = false;
  fetchTradeMarkList();
};

const dialogTitle: ComputedRef<string> = computed(() => edit.value ? "编辑品牌" : "添加品牌");

onMounted(() => {
  fetchTradeMarkList();
});

</script>

<template>
  <div class="trademark">
    <el-card>
      <el-button type="primary" icon="Plus" @click="handleAdd">添加品牌</el-button>
      <el-table border stripe :data="trademarkList" v-loading="loading" element-loading-text="数据加载中....." element-loading-background="#fff">
        <el-table-column width="100px" label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="品牌ID" align="center">
          <template #default="{row}">
            <el-tag type="danger" effect="dark">ID:{{ row.id }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center">
          <template #default="{row}">
            <el-tag effect="dark">{{ row.createTime }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template #default="{row}">
            <el-tag type="success" effect="dark">{{ row.updateTime }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="品牌名称" prop="tmName" align="center"></el-table-column>
        <el-table-column label="品牌LOGO" align="center">
          <template #default="{row}">
            <Image :src="row.logoUrl" :size="60" :title="row.tmName"></Image>
          </template>
        </el-table-column>
        <el-table-column label="品牌操作" prop="" align="center">
          <template #default="{row}">
            <el-button type="warning" icon="Edit" @click="handleEdit(row)">编辑品牌</el-button>
            <el-button type="danger" icon="Delete" @click="handleDelete(row)">删除品牌</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)" background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <el-dialog v-model="showDialog" :title="dialogTitle" ref="dialogRef" @close="dialogClose" :close-on-click-modal="false">
      <trade-form ref="tradeFormRef" @success="success"></trade-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

.trademark {
  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
